<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas{
            border: 1px solid #000000;
            display: block;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400">

    </canvas>
</body>
<script>
    let canvas = document.getElementById('canvas')
    let context = canvas.getContext('2d')
    //把坐标原点移动到canvas中心点
    context.translate(canvas.width/2,canvas.height/2)
    //旋转45°
    context.rotate(0.25*Math.PI)
    //缩放
    context.scale(2,1)//宽*2 高不变
    context.fillStyle='#f0f'
    context.fillRect(-20,-20,40,40)

</script>
</html>